<!--考核进度-->
<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item label="周期类型">
				<el-tree-select
					v-model="state.queryForm.zhiwu"
					:data="queryList"
					value-key="id"
					check-strictly
					clearable
					:render-after-expand="false"
					:props="{ value: 'id', label: 'name', children: 'children' }"
					placeholder="请选择"
				/>
			</el-form-item>
			<el-form-item>
				<KeyQuery v-model="state.queryForm.keyword" @getDataList="getDataList()" />
			</el-form-item>
		</el-form>

		<div class="card" :key="index" v-for="(item, index) of defData">
			<el-card>
				<el-row>
					<el-col :span="7" class="left-and-centre">
						<h1>{{ item.name }}</h1>
						<div>
							考核范围：<span v-for="i of fns(item.biaoqian)">{{ biaoqianNameMap.get(i) }}</span>
						</div>
						<div>
							考核周期：<span>{{ item.zhouqi }}</span>
						</div>
					</el-col>

					<el-col :span="1">
						<el-divider direction="vertical" style="height: 100%"></el-divider>
					</el-col>

					<el-col :span="8" class="left-and-centre">
						<h1>考核进度</h1>
						<div class="circle">
							考核总人数<span>{{ item.jihua }}</span> 评分中<span>{{ item.mianshi }}</span> 已完成<span>{{ item.luyong }}</span> 已确认<span>{{
								item.taotai
							}}</span>
						</div>
					</el-col>

					<el-col :span="7" class="right">
						<el-button v-auth="'module:assetStorage:update'" type="primary" link @click="addOrUpdateHandle(item.id)">查看详情</el-button>
						<el-button v-auth="'module:assetStorage:delete'" type="primary" link @click="deleteBatchHandle(item.id)">设置</el-button>
						<el-button v-auth="'module:assetStorage:delete'" type="primary" link @click="deleteBatchHandle(item.id)">终止考核</el-button>
					</el-col>
				</el-row>
			</el-card>
		</div>

		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
</template>

<script setup lang="ts" name="AttendanceShiftIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

const state: IHooksOptions = reactive({
	dataListUrl: '/nb/shift/page',
	deleteUrl: '/nb/shift/delete',
	queryForm: {}
})
const queryList = ref()
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const fns = (str: String) => {
	let s = str.split(',')
	return s
}
let biaoqianNameMap = new Map()
biaoqianNameMap.set('1', '五险一金')
const defData = ref()

const findOrgStaffRef = ref()
const open = () => {
	console.info('1111')
	findOrgStaffRef.value.init()
}
const fn = () => {
	console.info('员工选择 -返现')
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
